import React, { useRef } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { cn } from '@/lib/utils';
import TideRichTextEditor from './TideRichTextEditor';

// 定义数据类型的联合接口
export interface CommonItem {
  id: string;
  code: string;
  title: string;
  project: string;
  assignee: string;
  status: string;
  priority: string;
  progress: number;
  createdAt: string;
  deadline?: string;
  type: 'requirement' | 'task' | 'bug';
  description?: string;
}

export interface Requirement extends CommonItem {
  type: 'requirement';
  submitter: string;
  category: string;
}

export interface Task extends CommonItem {
  type: 'task';
  category: string;
}

export interface Bug extends CommonItem {
  type: 'bug';
  submitter: string;
  severity: string;
  module: string;
  version: string;
  isOverdue?: boolean;
}

// 消息类型接口
export interface MessageItem {
  id: number;
  type: 'message';
  title: string;
  content: string;
  time: string;
  read: boolean;
  important: boolean;
  sender?: string;
  relatedId?: number;
  actionUrl?: string;
}

export type DetailItem = Requirement | Task | Bug | MessageItem;

// 评论相关接口定义
interface Reply {
  id: string;
  author: string;
  content: string;
  timestamp: string;
  likes: number;
}

interface Comment {
  id: string;
  author: string;
  content: string;
  timestamp: string;
  likes: number;
  replies: Reply[];
}

interface DetailDrawerProps {
  isOpen: boolean;
  onClose: () => void;
  item: DetailItem | null;
  type?: 'requirement' | 'task' | 'bug' | 'message';
  className?: string;
  onMarkAsRead?: (messageId: number) => void; // 新增标记已读回调
}

const DetailDrawer: React.FC<DetailDrawerProps> = ({
  isOpen,
  onClose,
  item,
  type = 'requirement',
  className = '',
  onMarkAsRead // 新增标记已读回调
}) => {
  const [isEditing, setIsEditing] = React.useState(false);
  const [description, setDescription] = React.useState('');
  const [currentProgress, setCurrentProgress] = React.useState(0);
  const [isDragging, setIsDragging] = React.useState(false);
  
  // ReactQuill ref to avoid findDOMNode usage
  const reactQuillRef = useRef<any>(null);
  
  // 评论相关状态
  const [comments, setComments] = React.useState<Comment[]>([]);
  const [newComment, setNewComment] = React.useState('');
  const [replyingTo, setReplyingTo] = React.useState<string | null>(null);
  const [replyContent, setReplyContent] = React.useState('');
  
  React.useEffect(() => {
    if (item) {
      setDescription(item.description || '');
      setCurrentProgress(item.progress);
      
      // 模拟评论数据
      setComments([
        {
          id: '1',
          author: '张三',
          content: '这个需求描述得很清晰，期待实现效果！',
          timestamp: '2024-01-28 10:30:00',
          likes: 2,
          replies: [
            {
              id: '1-1',
              author: '李四',
              content: '同意，实现方案已经讨论过了',
              timestamp: '2024-01-28 11:15:00',
              likes: 1
            }
          ]
        },
        {
          id: '2',
          author: '王五',
          content: '进度看起来不错，继续保持！',
          timestamp: '2024-01-28 14:20:00',
          likes: 0,
          replies: []
        }
      ]);
    }
  }, [item]);
  
  // 处理进度拖动
  const handleProgressDrag = (e: React.MouseEvent<HTMLDivElement>) => {
    if (!isDragging) return;
    
    const progressBar = e.currentTarget.parentElement;
    if (!progressBar) return;
    
    const rect = progressBar.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const width = rect.width;
    const progress = Math.max(0, Math.min(100, Math.round((x / width) * 100)));
    
    setCurrentProgress(progress);
  };
  
  const handleDragStart = () => {
    setIsDragging(true);
  };
  
  const handleDragEnd = () => {
    setIsDragging(false);
    // 这里可以添加保存进度到后端的逻辑
    console.log('进度已更新至:', currentProgress + '%');
  };

  // 评论处理函数
  const handleAddComment = () => {
    if (!newComment.trim()) return;
    
    const comment: Comment = {
      id: Date.now().toString(),
      author: '当前用户',
      content: newComment,
      timestamp: new Date().toLocaleString(),
      likes: 0,
      replies: []
    };
    
    setComments(prev => [...prev, comment]);
    setNewComment('');
  };

  const handleAddReply = (commentId: string) => {
    if (!replyContent.trim()) return;
    
    const reply: Reply = {
      id: Date.now().toString(),
      author: '当前用户',
      content: replyContent,
      timestamp: new Date().toLocaleString(),
      likes: 0
    };
    
    setComments(prev => prev.map(comment => 
      comment.id === commentId 
        ? { ...comment, replies: [...comment.replies, reply] }
        : comment
    ));
    
    setReplyContent('');
    setReplyingTo(null);
  };

  const handleLike = (commentId: string, replyId?: string) => {
    setComments(prev => prev.map(comment => {
      if (replyId) {
        // 点赞回复
        if (comment.id === commentId) {
          return {
            ...comment,
            replies: comment.replies.map(reply => 
              reply.id === replyId 
                ? { ...reply, likes: reply.likes + 1 }
                : reply
            )
          };
        }
      } else {
        // 点赞评论
        if (comment.id === commentId) {
          return { ...comment, likes: comment.likes + 1 };
        }
      }
      return comment;
    }));
  };

  const handleKeyPress = (e: React.KeyboardEvent, type: 'comment' | 'reply', commentId?: string) => {
    if (e.ctrlKey && e.key === 'Enter') {
      e.preventDefault();
      if (type === 'comment') {
        handleAddComment();
      } else if (type === 'reply' && commentId) {
        handleAddReply(commentId);
      }
    }
  };
  
  if (!item) return null;
  
  // 富文本编辑器配置
  const modules = {
    toolbar: [
      [{ 'header': [1, 2, 3, false] }],
      ['bold', 'italic', 'underline', 'strike'],
      [{ 'list': 'ordered'}, { 'list': 'bullet' }],
      [{ 'indent': '-1'}, { 'indent': '+1' }],
      ['link', 'image'],
      ['clean']
    ],
  };
  
  const formats = [
    'header',
    'bold', 'italic', 'underline', 'strike',
    'list', 'bullet', 'indent',
    'link', 'image'
  ];
  
  // 获取类型中文名称
  const getTypeName = (type: string): string => {
    switch (type) {
      case 'requirement': return '需求';
      case 'task': return '任务';
      case 'bug': return '缺陷';
      case 'message': return '消息';
      default: return '未知';
    }
  };

  // 获取优先级颜色
  const getPriorityColor = (priority: string): string => {
    switch (priority) {
      case '高':
      case 'high':
        return 'bg-red-100 text-red-800 border-red-200';
      case '中':
      case 'medium':
        return 'bg-yellow-100 text-yellow-800 border-yellow-200';
      case '低':
      case 'low':
        return 'bg-green-100 text-green-800 border-green-200';
      case '紧急':
      case 'urgent':
        return 'bg-purple-100 text-purple-800 border-purple-200';
      default:
        return 'bg-gray-100 text-gray-800 border-gray-200';
    }
  };

  // 获取状态颜色
  const getStatusColor = (status: string): string => {
    switch (status) {
      case '待处理':
      case 'pending':
      case '待分配':
      case '待评审':
        return 'bg-gray-100 text-gray-800';
      case '设计中':
        return 'bg-indigo-100 text-indigo-800';
      case '开发中':
      case '进行中':
      case '处理中':
        return 'bg-blue-100 text-blue-800';
      case '测试中':
        return 'bg-purple-100 text-purple-800';
      case '已完成':
      case 'completed':
        return 'bg-green-100 text-green-800';
      default:
        return 'bg-gray-100 text-gray-800';
    }
  };

  // 获取类型图标
  const getTypeIcon = (type: string): string => {
    switch (type) {
      case 'requirement': return 'fa-list-check';
      case 'task': return 'fa-tasks';
      case 'bug': return 'fa-bug';
      case 'message': return 'fa-envelope';
      default: return 'fa-question';
    }
  };

  return (
    <AnimatePresence>
      {isOpen && (
        <motion.div
          className="fixed inset-0 z-50 overflow-hidden"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          transition={{ duration: 0.2 }}
          onClick={onClose}
        >
          <motion.div
            className="absolute inset-0 bg-gray-600 bg-opacity-75 transition-opacity"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{ duration: 0.2 }}
          />
          <div className="absolute inset-0 overflow-hidden">
            <div className="absolute inset-y-0 right-0 flex max-w-full">
              <motion.div
                className={cn(
                  'relative w-screen max-w-4xl bg-white shadow-xl dark:bg-gray-900',
                  className
                )}
                initial={{ x: '100%' }}
                animate={{ x: 0 }}
                exit={{ x: '100%' }}
                transition={{ type: 'tween', duration: 0.3 }}
                onClick={(e) => e.stopPropagation()}
              >
                {/* 抽屉头部 */}
                <div className="flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700">
                  <div className="flex items-center space-x-3">
                    <div className="w-10 h-10 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center">
                      <i className={`fa-solid ${getTypeIcon(item.type)} text-blue-600 dark:text-blue-400 text-lg`}></i>
                    </div>
                    <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
                      {getTypeName(item.type)}详情
                    </h3>
                  </div>
                  <div className="flex items-center space-x-2">
                    {/* 标记已读按钮 - 仅对未读消息显示 */}
                    {item.type === 'message' && !item.read && onMarkAsRead && (
                      <button
                        type="button"
                        className="flex items-center bg-green-600 hover:bg-green-700 text-white py-2 px-3 rounded-md text-sm transition-colors duration-200"
                        onClick={() => onMarkAsRead(item.id)}
                      >
                        <i className="fa-solid fa-check mr-1"></i>
                        标记已读
                      </button>
                    )}
                    <button
                      type="button"
                      className="rounded-md text-gray-400 hover:text-gray-500 focus:outline-none"
                      onClick={onClose}
                    >
                      <i className="fa-solid fa-times text-xl"></i>
                    </button>
                  </div>
                </div>

                {/* 抽屉内容 */}
                <div className="p-6 overflow-y-auto h-[calc(100vh-12rem)]">
                  {/* 基本信息 */}
                  <div className="mb-6">
                    {item.type !== 'message' && (
                      <div className="font-mono text-sm text-blue-600 mb-2">{item.code}</div>
                    )}
                    <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-3">{item.title}</h2>
                    <div className="flex flex-wrap gap-3">
                      {item.type !== 'message' && (
                        <>
                          <span className={`px-3 py-1 text-xs font-medium rounded-full border ${getPriorityColor(item.priority)}`}>
                            {item.priority === 'urgent' ? '紧急' : 
                             item.priority === 'high' ? '高' : 
                             item.priority === 'medium' ? '中' : 
                             item.priority === 'low' ? '低' : item.priority}
                          </span>
                          <span className={`px-3 py-1 text-xs font-medium rounded-full ${getStatusColor(item.status)}`}>
                            {item.status}
                          </span>
                          {item.type === 'bug' && item.severity && (
                            <span className={`px-3 py-1 text-xs font-medium rounded-full ${getPriorityColor(item.severity)}`}>
                              {item.severity}
                            </span>
                          )}
                        </>
                      )}
                      {item.type === 'message' && (
                        <>
                          <span className={`px-3 py-1 text-xs font-medium rounded-full ${
                            item.important ? 'bg-red-100 text-red-800 border-red-200' : 'bg-blue-100 text-blue-800 border-blue-200'
                          } border`}>
                            {item.important ? '重要' : '普通'}
                          </span>
                          <span className={`px-3 py-1 text-xs font-medium rounded-full ${
                            item.read ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800'
                          }`}>
                            {item.read ? '已读' : '未读'}
                          </span>
                        </>
                      )}
                    </div>
                  </div>

                  {/* 详细信息卡片 - 缩小布局 */}
                  <div className="bg-gray-50 dark:bg-gray-800 rounded-xl p-4 mb-6">
                    <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
                      {item.type !== 'message' ? (
                        <>
                          <div className="col-span-1">
                            <p className="text-xs text-gray-500 dark:text-gray-400 mb-1">所属项目</p>
                            <p className="text-sm font-medium text-gray-900 dark:text-white truncate">{item.project}</p>
                          </div>
                          <div className="col-span-1">
                            <p className="text-xs text-gray-500 dark:text-gray-400 mb-1">负责人</p>
                            <p className="text-sm font-medium text-gray-900 dark:text-white truncate">{item.assignee}</p>
                          </div>
                          {(item.type === 'requirement' || item.type === 'bug') && (
                            <div className="col-span-1">
                              <p className="text-xs text-gray-500 dark:text-gray-400 mb-1">提交人</p>
                              <p className="text-sm font-medium text-gray-900 dark:text-white truncate">{item.submitter}</p>
                            </div>
                          )}
                          {(item.type === 'requirement' || item.type === 'task') && (
                            <div className="col-span-1">
                              <p className="text-xs text-gray-500 dark:text-gray-400 mb-1">类别</p>
                              <p className="text-sm font-medium text-gray-900 dark:text-white truncate">{item.category}</p>
                            </div>
                          )}
                          {item.type === 'bug' && (
                            <div className="col-span-1">
                              <p className="text-xs text-gray-500 dark:text-gray-400 mb-1">模块</p>
                              <p className="text-sm font-medium text-gray-900 dark:text-white truncate">{item.module}</p>
                            </div>
                          )}
                          {item.type === 'bug' && (
                            <div className="col-span-1">
                              <p className="text-xs text-gray-500 dark:text-gray-400 mb-1">版本</p>
                              <p className="text-sm font-medium text-gray-900 dark:text-white truncate">{item.version}</p>
                            </div>
                          )}
                          <div className="col-span-1">
                            <p className="text-xs text-gray-500 dark:text-gray-400 mb-1">创建时间</p>
                            <p className="text-sm font-medium text-gray-900 dark:text-white truncate">{item.createdAt}</p>
                          </div>
                          {item.deadline && (
                            <div className={`col-span-1 ${item.isOverdue ? 'text-red-500' : ''}`}>
                              <p className="text-xs text-gray-500 dark:text-gray-400 mb-1">截止日期</p>
                              <p className="text-sm font-medium text-gray-900 dark:text-white truncate">{item.deadline}</p>
                            </div>
                          )}
                        </>
                      ) : (
                        <>
                          <div className="col-span-1">
                            <p className="text-xs text-gray-500 dark:text-gray-400 mb-1">发送时间</p>
                            <p className="text-sm font-medium text-gray-900 dark:text-white truncate">{item.time}</p>
                          </div>
                          <div className="col-span-1">
                            <p className="text-xs text-gray-500 dark:text-gray-400 mb-1">发送者</p>
                            <p className="text-sm font-medium text-gray-900 dark:text-white truncate">{item.sender || '系统'}</p>
                          </div>
                          <div className="col-span-1">
                            <p className="text-xs text-gray-500 dark:text-gray-400 mb-1">消息类型</p>
                            <p className="text-sm font-medium text-gray-900 dark:text-white truncate">{item.type}</p>
                          </div>
                          {item.relatedId && (
                            <div className="col-span-1">
                              <p className="text-xs text-gray-500 dark:text-gray-400 mb-1">相关ID</p>
                              <p className="text-sm font-medium text-gray-900 dark:text-white truncate">{item.relatedId}</p>
                            </div>
                          )}
                          {item.actionUrl && (
                            <div className="col-span-1">
                              <p className="text-xs text-gray-500 dark:text-gray-400 mb-1">操作链接</p>
                              <p className="text-sm font-medium text-blue-600 dark:text-blue-400 truncate">{item.actionUrl}</p>
                            </div>
                          )}
                        </>
                      )}
                    </div>
                  </div>

                  {/* 消息内容区域 */}
                  <div className="mb-6">
                    <div className="flex justify-between items-center mb-3">
                      <h4 className="text-sm font-medium text-gray-900 dark:text-white">消息内容</h4>
                    </div>
                    
                    {type === 'message' ? (
                      <div 
                        className="bg-gray-50 dark:bg-gray-800 rounded-lg p-4 min-h-32 border border-gray-200 dark:border-gray-700"
                      >
                        <p className="text-sm text-gray-700 dark:text-gray-300 whitespace-pre-wrap">{item?.content || '暂无消息内容'}</p>
                      </div>
                    ) : (
                      <>
                        <div className="flex justify-between items-center mb-3">
                          <h4 className="text-sm font-medium text-gray-900 dark:text-white">任务详情</h4>
                          <button
                            onClick={() => setIsEditing(!isEditing)}
                            className="px-3 py-1 text-xs bg-blue-600 hover:bg-blue-700 text-white rounded transition-colors"
                          >
                            {isEditing ? '保存' : '编辑'}
                          </button>
                        </div>
                        
                        {isEditing ? (
                          <TideRichTextEditor
                            value={description}
                            onChange={setDescription}
                            placeholder="请输入任务详情..."
                            className=""
                          />
                        ) : (
                          <div 
                            className="bg-gray-50 dark:bg-gray-800 rounded-lg p-4 min-h-32 border border-gray-200 dark:border-gray-700"
                            dangerouslySetInnerHTML={{ __html: description || '<p class="text-gray-500 dark:text-gray-400 italic">暂无任务详情描述</p>' }}
                          />
                        )}
                      </>
                    )}
                  </div>

                  {/* 进度信息 */}
                  {type !== 'message' && (
                    <div className="mb-6">
                      <div className="flex justify-between items-center mb-2">
                        <p className="text-sm font-medium text-gray-900 dark:text-white">完成进度</p>
                        <p className="text-sm font-medium text-gray-900 dark:text-white">{currentProgress}%</p>
                      </div>
                      <div 
                        className="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700 relative cursor-pointer"
                        onMouseDown={handleDragStart}
                        onMouseMove={handleProgressDrag}
                        onMouseUp={handleDragEnd}
                        onMouseLeave={handleDragEnd}
                      >
                        <div
                          className="bg-blue-600 h-2.5 rounded-full transition-all duration-200 relative"
                          style={{ width: `${currentProgress}%` }}
                        >
                          {/* 拖动滑块 */}
                          <div 
                            className="absolute right-0 top-1/2 w-4 h-4 bg-white border-2 border-blue-600 rounded-full transform -translate-y-1/2 translate-x-1/2 shadow-md cursor-grab active:cursor-grabbing"
                            onMouseDown={handleDragStart}
                          ></div>
                        </div>
                      </div>
                      <div className="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-1">
                        <span>0%</span>
                        <span>拖动滑块设置进度</span>
                        <span>100%</span>
                      </div>
                    </div>
                  )}

                  {/* 子任务列表（模拟数据） */}
                  {type !== 'message' && (
                    <div className="mb-6">
                      <h4 className="text-sm font-medium text-gray-900 dark:text-white mb-3">子任务</h4>
                      <div className="space-y-3">
                        <div className="flex items-center gap-2">
                          <input type="checkbox" checked readOnly className="w-4 h-4 text-blue-600 border-gray-300 rounded" />
                          <span className="text-sm text-gray-600 dark:text-gray-400 line-through">分析需求</span>
                        </div>
                        <div className="flex items-center gap-2">
                          <input type="checkbox" checked readOnly className="w-4 h-4 text-blue-600 border-gray-300 rounded" />
                          <span className="text-sm text-gray-600 dark:text-gray-400 line-through">设计方案</span>
                        </div>
                        <div className="flex items-center gap-2">
                          <input type="checkbox" readOnly className="w-4 h-4 text-blue-600 border-gray-300 rounded" />
                          <span className="text-sm text-gray-600 dark:text-gray-400">开发实现</span>
                        </div>
                        <div className="flex items-center gap-2">
                          <input type="checkbox" readOnly className="w-4 h-4 text-blue-600 border-gray-300 rounded" />
                          <span className="text-sm text-gray-600 dark:text-gray-400">测试验证</span>
                        </div>
                      </div>
                    </div>
                  )}

                  {/* 关联信息 */}
                  {type !== 'message' && (
                    <div className="mb-6">
                      <h4 className="text-sm font-medium text-gray-900 dark:text-white mb-3">关联信息</h4>
                      <div className="space-y-3">
                        <div className="flex items-center gap-2">
                          <i className="fa-solid fa-link text-blue-600"></i>
                          <span className="text-sm text-blue-600">相关文档：系统架构设计</span>
                        </div>
                        <div className="flex items-center gap-2">
                          <i className="fa-solid fa-file-alt text-blue-600"></i>
                          <span className="text-sm text-blue-600">技术方案：实现文档 v1.0</span>
                        </div>
                      </div>
                    </div>
                  )}

                  {/* 评论区域 */}
                  <div>
                    <h4 className="text-sm font-medium text-gray-900 dark:text-white mb-3">评论 ({comments.length})</h4>
                    <div className="space-y-4">
                      {/* 评论列表 */}
                      {comments.map((comment) => (
                        <div key={comment.id} className="bg-gray-50 dark:bg-gray-800 rounded-lg p-4">
                          <div className="flex items-center gap-2 mb-2">
                            <div className="w-8 h-8 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center text-sm font-medium">
                              {comment.author.charAt(0)}
                            </div>
                            <span className="text-sm font-medium text-gray-900 dark:text-white">{comment.author}</span>
                            <span className="text-xs text-gray-500 dark:text-gray-400">{comment.timestamp}</span>
                          </div>
                          <p className="text-sm text-gray-600 dark:text-gray-400">{comment.content}</p>
                          <div className="flex items-center gap-4 mt-2">
                            <button 
                              onClick={() => handleLike(comment.id)}
                              className="text-xs text-gray-500 dark:text-gray-400 flex items-center gap-1 hover:text-red-500"
                            >
                              <i className="fa-solid fa-thumbs-up"></i>
                              <span>{comment.likes}</span>
                            </button>
                            <button 
                              onClick={() => setReplyingTo(replyingTo === comment.id ? null : comment.id)}
                              className="text-xs text-gray-500 dark:text-gray-400 flex items-center gap-1 hover:text-blue-500"
                            >
                              <i className="fa-solid fa-reply"></i>
                              <span>回复 ({comment.replies.length})</span>
                            </button>
                          </div>
                          
                          {/* 回复列表 */}
                          {comment.replies.length > 0 && (
                            <div className="mt-3 ml-4 space-y-2">
                              {comment.replies.map((reply) => (
                                <div key={reply.id} className="bg-white dark:bg-gray-700 rounded p-3 border border-gray-200 dark:border-gray-600">
                                  <div className="flex items-center gap-2 mb-1">
                                    <div className="w-6 h-6 rounded-full bg-green-100 text-green-600 flex items-center justify-center text-xs font-medium">
                                      {reply.author.charAt(0)}
                                    </div>
                                    <span className="text-xs font-medium text-gray-900 dark:text-white">{reply.author}</span>
                                    <span className="text-xs text-gray-500 dark:text-gray-400">{reply.timestamp}</span>
                                  </div>
                                  <p className="text-xs text-gray-600 dark:text-gray-400">{reply.content}</p>
                                  <div className="flex items-center gap-3 mt-1">
                                    <button 
                                      onClick={() => handleLike(comment.id, reply.id)}
                                      className="text-xs text-gray-500 dark:text-gray-400 flex items-center gap-1 hover:text-red-500"
                                    >
                                      <i className="fa-solid fa-thumbs-up"></i>
                                      <span>{reply.likes}</span>
                                    </button>
                                  </div>
                                </div>
                              ))}
                            </div>
                          )}
                          
                          {/* 回复输入框 */}
                          {replyingTo === comment.id && (
                            <div className="mt-3 ml-4 flex gap-2">
                              <div className="w-6 h-6 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center text-xs font-medium shrink-0">
                                我
                              </div>
                              <div className="flex-1">
                                <textarea
                                  value={replyContent}
                                  onChange={(e) => setReplyContent(e.target.value)}
                                  onKeyDown={(e) => handleKeyPress(e, 'reply', comment.id)}
                                  className="w-full border border-gray-300 rounded-lg p-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-800 dark:border-gray-700 dark:text-white"
                                  rows={2}
                                  placeholder="回复评论... (Ctrl+Enter 发送)"
                                />
                                <div className="flex justify-end gap-2 mt-1">
                                  <button 
                                    onClick={() => setReplyingTo(null)}
                                    className="px-3 py-1 text-xs border border-gray-300 rounded hover:bg-gray-50 dark:border-gray-600 dark:hover:bg-gray-700 transition-colors"
                                  >
                                    取消
                                  </button>
                                  <button 
                                    onClick={() => handleAddReply(comment.id)}
                                    className="px-3 py-1 text-xs bg-blue-600 hover:bg-blue-700 text-white rounded transition-colors"
                                  >
                                    发送回复
                                  </button>
                                </div>
                              </div>
                            </div>
                          )}
                        </div>
                      ))}
                      
                      {/* 评论输入框 */}
                      <div className="flex gap-3">
                        <div className="w-8 h-8 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center text-sm font-medium shrink-0">
                          我
                        </div>
                        <div className="flex-1">
                          <textarea
                            value={newComment}
                            onChange={(e) => setNewComment(e.target.value)}
                            onKeyDown={(e) => handleKeyPress(e, 'comment')}
                            className="w-full border border-gray-300 rounded-lg p-3 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-800 dark:border-gray-700 dark:text-white"
                            rows={3}
                            placeholder="发表我的看法... (Ctrl+Enter 发送)"
                          />
                          <div className="flex justify-end mt-2">
                            <button 
                              onClick={handleAddComment}
                              className="px-4 py-1.5 text-sm bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors"
                            >
                              发送评论
                            </button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                {/* 抽屉底部 */}
                <div className="absolute bottom-0 left-0 right-0 bg-white dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700 p-4 flex justify-between">
                  <div className="flex gap-2">
                    <button className="px-4 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-800 transition-colors">
                      <i className="fa-solid fa-download mr-1"></i>
                      导出
                    </button>
                    <button className="px-4 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-800 transition-colors">
                      <i className="fa-solid fa-share-alt mr-1"></i>
                      分享
                    </button>
                  </div>
                  <div className="flex gap-2">
                    <button className="px-4 py-2 text-sm bg-green-600 hover:bg-green-700 text-white rounded-lg transition-colors">
                      {item.status === '已完成' || item.status === 'completed' ? '重新打开' : '标记完成'}
                    </button>
                  </div>
                </div>
              </motion.div>
            </div>
          </div>
        </motion.div>
      )}
    </AnimatePresence>
  );
};

export default DetailDrawer;